<template>
  <el-main>
    <!-- 搜索栏 -->
    <el-form :model="searchParm" :inline="true" size="default">
      <el-form-item>
        <el-select
          v-model="searchParm.useStatus"
          class="m-2"
          placeholder="请选择使用状态"
          size="default"
          style="width: 240px"
        >
          <el-option
            v-for="item in useOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="searchParm.useStatus"
          class="m-2"
          placeholder="请选择签到状态"
          size="default"
          style="width: 240px"
        >
          <el-option
            v-for="item in signOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="searchBtn" icon="Search">搜索</el-button>
        <el-button @click="resetBtn" plain type="danger" icon="Close">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格数据 -->
    <el-table :height="tableHeight" :data="tableList" border stripe>
        <el-table-column prop="roomName" label="预览室名称"></el-table-column>
        <el-table-column prop="seatName" label="预约座位"></el-table-column>
        <el-table-column prop="stuName" label="预约人"></el-table-column>
        <el-table-column prop="phone" label="预约人电话"></el-table-column>
        <el-table-column prop="orderTime" label="预约时间"></el-table-column>
        <el-table-column prop="status" label="签到状态">
        <template #default="scope">
          <el-tag
            v-if="scope.row.status == '1'"
            type="primary"
            size="default"
            effect="dark"
            >已预约</el-tag
          >
          <el-tag
            v-if="scope.row.status == '2'"
            type="danger"
            size="default"
            effect="dark"
            >已签到</el-tag
          >
          <el-tag
            v-if="scope.row.status == '3'"
            type="success"
            size="default"
            effect="dark"
            >已签退</el-tag
          >
          <el-tag
            v-if="scope.row.status == '4'"
            type="warning"
            size="default"
            effect="dark"
            >已取消</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="useStatus" label="使用状态">
        <template #default="scope">
          <el-tag
            v-if="scope.row.useStatus == '0'"
            type="danger"
            size="default"
            effect="dark"
            >未使用</el-tag
          >
          <el-tag
            v-if="scope.row.useStatus == '1'"
            type="success"
            size="default"
            effect="dark"
            >使用中</el-tag
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="searchParm.currentPage"
        :page-sizes="[10,20, 40, 80, 100]"
        :page-size="searchParm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchParm.total" background>
    </el-pagination>
    
  </el-main>
</template>

<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from "vue";
import {getListApi} from '@/api/select_seat/index'
//搜索参数
const searchParm = reactive({
  currentPage: 1,
  pageSize: 10,
  status: "",
  useStatus: "",
  stuName: "",
  total:0
});
//使用下拉数据
const useOptions = ref([
  {
    value: "0",
    label: "未使用",
  },
  {
    value: "1",
    label: "使用中",
  },
]);
//签到下拉数据
const signOptions = ref([
  {
    value: "1",
    label: "已预约",
  },
  {
    value: "2",
    label: "已签到",
  },
  {
    value: "3",
    label: "已签退",
  },
  {
    value: "4",
    label: "已取消"
  }
]);
//表格数据
const tableList = ref([])
//获取表格数据
const getList = async()=>{
    let res = await getListApi(searchParm)
    if(res && res.code == 200){
        tableList.value = res.data.records;
        searchParm.total = res.data.total;
    }
}
//页容量改变时触发
const sizeChange = (size: number) => {
  searchParm.pageSize = size;
  getList();
};
//页数改变时触发
const currentChange = (page: number) => {
  searchParm.currentPage = page;
  getList();
};
//搜索按钮
const searchBtn = ()=>{
    getList()
}
//重置按钮
const resetBtn = ()=>{
    searchParm.currentPage = 1;
    searchParm.status = '';
    searchParm.stuName = '';
    searchParm.useStatus = '';
    getList()
}
//表格高度
const tableHeight = ref(0)
onMounted(()=>{
    getList()
    nextTick(()=>{
        tableHeight.value = window.innerHeight - 230
    })
})
</script>

<style scoped></style>
